<template>
    <div class="content_nav flex">
        <div class="nav_icon">▌&nbsp;&nbsp;</div>
        <div
            class="nav_item flexrcc pointer"
            :class="[cut_nav==item.id? 'nav_active':'']"
            v-for="item in data_list"
            :key="item.id"
            @click="onNav(item.id)"
        >
            {{ item.label }}
        </div>
    </div>
</template>

<script>
export default {
    name: "ContentNav",
    components: {},
    props: {
        data_list: {
            type: Array,
            default: () => [],
        },
        c_nav: {
            type: [Number, String],
            default: 1,
        },
    },
    data() {
        return {
            cut_nav: 1,
        };
    },
    computed: {},
    watch: {},
    created() {
        this.cut_nav = this.c_nav
    },
    mounted() {
        
    },
    methods: {
        onNav(id) {
            this.cut_nav = id;
            this.$emit('contentNav', id)
        }
    },
};
</script>
<style lang="scss" scoped>
.content_nav {
        color: #ffffff;
        border-bottom: 1px solid #083957;
        margin-bottom: vh(20);
        // padding-bottom: vh(10);
        .nav_icon {
            color:#2EF7FC;
        }
        .nav_item {
            margin-right: vw(30);
            padding-bottom: vh(10);
        }
        .nav_active {
            color: #2EF7FC;
            border-bottom: 3px solid #2EF7FC;
        }
    }
</style>
